import React, { useState, useEffect } from 'react'
import { NavBar, Mask, Form, Input, Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import axios from 'axios'
import { Toast } from 'react-vant'
import './Search.css'

export default function Secure() {
    const navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    const [visible1, setVisible1] = useState(false)
    const [isSending, setIsSending] = useState(false);
    const [countDown, setCountDown] = useState(60);
    const [phone, setphone] = useState('')
    const [yan, setyan] = useState('')
    const [pass, setpass] = useState('')
    const back = () => {
        navigate('/setup')
    }

    const handlerDelLogin = async () => {
        await axios.post('http://localhost:3000/delLogin')
        setVisible(false)
        navigate('/login')
    }

    const handlerPhone = (e) => {
        setphone(e.target.value)
    }

    const handlerMa = (e) => {
        setyan(e.target.value)
    }

    const handlerPass = (e) => {
        setpass(e.target.value)
    }

    const handlerYan = async () => {
        await axios.post('http://localhost:3000/get_sms', { phone: phone })
        setIsSending(true)
    }

    const handlerXiugai = async () => {
        const data = await axios.post('http://localhost:3000/wang', { phone: phone, yan: yan, pass: pass })
        if (data.data.code === 200) {
            Toast('修改成功')
            setVisible1(false)
        } else {
            Toast(data.data.msg)
        }
    }

    useEffect(() => {
        let intervalID;
        if (countDown > 0 && isSending) {
            intervalID = setInterval(() => {
                setCountDown((prevCountDown) => prevCountDown - 1)
            }, 1000)
        } else if (countDown == 0) {
            setIsSending(false)
        }
        return () => {
            clearInterval(intervalID)
        }
    }, [countDown, isSending])
    return (
        <div>
            <NavBar onBack={back}>
                <h3>账号安全</h3>
            </NavBar>
            <hr />
            <div>
                <div style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <p style={{ marginLeft: '20px', fontSize: '18px' }}>手机号</p>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <p style={{ fontSize: '16px', marginRight: '15px' }}>158****6583</p>
                        <button style={{ marginRight: '20px', width: '60px', height: '30px', borderRadius: '10px', backgroundColor: 'white', border: '1px solid #ccc' }}>换绑</button>
                    </div>
                </div>
                <div style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <p style={{ marginLeft: '20px', fontSize: '18px' }}>登陆密码</p>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <p style={{ fontSize: '16px', marginRight: '15px' }}>已设置</p>
                        <img onClick={() => { setVisible1(true) }} style={{ width: '10px', height: '10px', marginRight: '20px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' />
                    </div>
                </div>
                <div style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <p style={{ marginLeft: '20px', fontSize: '18px' }}>注销账号</p>
                    <img onClick={() => { setVisible(true) }} style={{ width: '10px', height: '10px', marginRight: '20px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' />
                </div>
            </div>
            <>
                <Mask visible={visible} onMaskClick={() => setVisible(false)}>
                    <div className='overlayContent'>
                        <p style={{ textAlign: 'center', fontWeight: 'bold', fontSize: '16px', marginTop: '30px' }}>温馨提示</p>
                        <p style={{ textAlign: 'center', marginTop: '20px' }}>确认注销账号吗</p>
                        <div>
                            <button style={{ width: '150px', height: '40px', marginTop: '22px', borderRadius: '0px 0px 0px 10px', border: '0px', marginLeft: '20px' }} onClick={() => { setVisible(false) }}>取消</button>
                            <button style={{ width: '150px', height: '40px', marginTop: '22px', borderRadius: '0px 0px 10px 0px', border: '0px', backgroundColor: 'rgb(251, 229, 172)' }} onClick={() => { handlerDelLogin() }}>确定</button>
                        </div>
                    </div>
                </Mask>
            </>
            <>
                <Mask visible={visible1} onMaskClick={() => setVisible1(false)}>
                    <div className='overlayContent2'>
                        <Form layout='horizontal'>
                            <Form.Item label='+86' name='username'>
                                <Input onBlur={(event) => { handlerPhone(event) }} placeholder='请输入手机号码' clearable />
                            </Form.Item>

                            <Form.Item label='验证码'
                                extra={
                                    <div className='extraPart'>
                                        {isSending ?
                                            (<><span>{countDown}后重新获取</span></>)
                                            :
                                            (<a onClick={() => { handlerYan() }}>获取验证码</a>)
                                        }
                                    </div>
                                }
                            >
                                <Input placeholder='请输入验证码' onBlur={(event) => { handlerMa(event) }} clearable />
                            </Form.Item>
                            <Form.Item label='新密码'
                                name='password1'
                                extra={
                                    <div className='eye'>
                                        {!visible ? (
                                            <EyeInvisibleOutline onClick={() => setVisible(true)} />
                                        ) : (
                                            <EyeOutline onClick={() => setVisible(false)} />
                                        )}
                                    </div>
                                }
                            >
                                <Input
                                    placeholder='请输入新密码'
                                    clearable
                                    onBlur={(event) => { handlerPass(event) }}
                                    type={visible ? 'text' : 'password'}
                                />
                            </Form.Item>
                        </Form>
                        {
                            phone == '' && pass == '' && yan == '' ?
                                <Button style={{ marginTop: '20px' }} block shape='rounded' color='primary' disabled>修改</Button> :
                                <Button style={{ marginTop: '20px' }} onClick={() => { handlerXiugai() }} block shape='rounded' color='primary'>修改</Button>
                        }
                    </div>
                </Mask>
            </>
        </div>
    )
}